import React, { useState } from 'react';
import { Search, Swiper, ActionBar , Button} from 'react-vant';
import './index.less'
import { history } from 'umi';

export default function Home() {
  const [value, setValue] = useState('');
  let [yvyue ,setYvyue] = useState(false)
  let [scroll , setScroll] = useState(0)
  var imgs = [
    { id: 1, img: 'https://img2.baidu.com/it/u=876112835,2375695061&fm=253&fmt=auto?w=293&h=188' },
    { id: 2, img: 'https://img2.baidu.com/it/u=813476864,1665703542&fm=253&fmt=auto&app=120&f=JPEG?w=617&h=410' },
    { id: 3, img: 'https://img2.baidu.com/it/u=325329691,3765252317&fm=253&fmt=auto&app=138&f=JPEG?w=550&h=330' }
  ]

  const tuijian = [
    {id:1,title:'【训练营第一期】3天基础突破题技巧提升',ypeice:299.00,xprice:1.00},
    {id:2,title:'【训练营第一期】3天基础突破题技巧提升',ypeice:299.00,xprice:1.00},
    {id:3,title:'【训练营第一期】3天基础突破题技巧提升',ypeice:299.00,xprice:1.00},
    {id:4,title:'【训练营第一期】3天基础突破题技巧提升',ypeice:299.00,xprice:1.00},
    {id:5,title:'【训练营第一期】3天基础突破题技巧提升',ypeice:299.00,xprice:1.00},
  ]

  window.onscroll = function(){
    let scrollTop = document.documentElement.scrollTop
    let clientHeight = document.documentElement.clientHeight
    let bodyHeight = document.body.clientHeight
    setScroll(scrollTop)
    
  }

  function zhiding(){
    window.scrollTo({
      top:0,
      behavior:'smooth'
    })
  }

  return (
    <div className='hom3'>
      {scroll > 50 ? <button className='zhiding' onClick={()=>zhiding()}>置顶</button>:''}
      <div style={{ zIndex: '99', position: 'fixed', top: '0px', width: '100%', height: '50px' }}>
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />
      </div>
      <div>
        <Swiper autoplay={5000}>
          {imgs.map((item) => (
            <Swiper.Item key={item.id}>
              <img src={item.img} alt="" style={{ width: '100%', height: '190px' }} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className='box2'>
        <div className='box3'>
          <img src={require('../../../public/wzcimg/11.svg')} alt="" className='img1' />
          <p>精品课程</p>
        </div>
        <div className='box3'>
          <img src={require('../../../public/wzcimg/22.svg')} alt="" className='img2' />
          <p>免费课程</p>
        </div>
        <div className='box3'>
          <img src={require('../../../public/wzcimg/33.svg')} alt="" className='img3' />
          <p>高端课程</p>
        </div>
        <div className='box3'>
          <img src={require('../../../public/wzcimg/44.svg')} alt="" className='img4' />
          <p>限时优惠</p>
        </div>
      </div>
      <div className='zhibo'>
        <span className='szhi'>直播</span>
        <span className='s2' onClick={()=>history.push('/lishi')}>更多<img src={require('../../../public/wzcimg/更多.svg')} alt="" className='img5' /></span>
      </div>
      <div className='boxzhi'>
        <div className='zhibotu'>
          <img src={require('../../../public/wzcimg/fen.png')} alt="" className='fen' />
        </div>
        <div className='zhi5'>
          <p className='p3'>先到预习课第一次</p>
          <p><span className='span1'>时间：3月20日</span><span>20：00-21：00</span></p>
          <p><span className='span2'>讲师：李老师</span><span>50人已预约</span></p>
        </div>
        <div className='bu1'>
          <Button plain hairline type='primary' round color="#3F45FF" shadow="2" onClick={()=>setYvyue(true)}>
            {
              yvyue ? '已预约' : '立即预约'
            }
          </Button>
        </div>
      </div>
      <p className='p4'>课程推荐</p>
      <div className='ctui'>
            {
              tuijian.map(item=>{
                return <div key={item.id} className='tuibox'>
                  <div className='cunbox'>
                    <div className='xunbox'>
                      <span className='sxun'>{item.title}</span>
                    </div>
                    <div className='xianbox'>
                    <Button plain hairline type='danger' round size='small' color='red'>
                      限时优惠
                    </Button>
                    </div>
                  </div>
                  <div>
                    <button className='buji'>基础经济</button>
                    <button className='buji'>直播</button>
                  </div>
                  <div>
                    <div className='toulao'>
                      <div className='touxiangbox'>
                        <img src={require('../../../public/wzcimg/lao1.webp')} alt="" className='laoimg'/>
                        <p className='laop'>张老师</p>
                      </div>
                      <div className='touxiangbox'>
                        <img src={require('../../../public/wzcimg/lao2.webp')} alt="" className='laoimg'/>
                        <p className='laop'>李老师</p>
                      </div>
                      <div className='qianbox'>
                        <p className='pp1'>￥{item.ypeice}.00</p>
                        <p className='pp2'>￥{item.xprice}.00</p>
                        <p className='pp3'>50人已报名</p>
                      </div>
                    </div>
                  </div>
                </div>
              })
            }
      </div>
    </div>
  )
}
